<!--
 * @Author: lide1202@hotmail.com
 * @Date: 2021-3-13 11:04:24
 * @Last Modified by:   lide1202@hotmail.com
 * @Last Modified time: 2021-3-13 11:04:24
 !-->
<template>
<div>
  <div v-for="(widget, index) in widgetComponent" :key="index">
    <component :is="widget.type" :value="value" />
  </div>
</div>
</template>

<script>
import { queryEchartsData } from "@/api/bigscreen";
import widgetText from "./widgetText.vue";
import widgetImage from "./widgetImage.vue";
import widgetBarStackChart from "./widgetBarStackChart";
import widgetLineStackChart from "./widgetLineStackChart";
import WidgetPiechart from "./widgetPiechart.vue";
import widgetMap from "./widgetMap.vue";
import widgetTable from "./widgetTable.vue";
import widgetList from "./widgetList";
import WidgetZuhe from "./widgetZuhe";
export default {
  name: "WidgetText",
  components: {
    widgetText,
    widgetImage,
    widgetBarStackChart,
    widgetLineStackChart,
    WidgetPiechart,
    widgetMap,
    widgetTable,
    widgetList,
    WidgetZuhe
  },
  props: {
    value: Object,
    ispreview: Boolean,
    widgetComponent: Array
  },
  data() {
    return {
      options: {},
      optionsData: {}
    };
  },
  computed: {
    transStyle() {
      return this.objToOne(this.options);
    },
    styleColor() {
      return {
        position: this.ispreview ? "absolute" : "static",
        color: this.transStyle.color,
        "font-weight": this.transStyle.fontWeight,
        text: this.transStyle.text,
        "font-size": this.transStyle.fontSize + "px",
        "letter-spacing": this.transStyle.letterSpacing + "em",
        background: this.transStyle.background,
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
        right: this.transStyle.right + "px",
        "border-radius": this.transStyle.borderRadius + 'px',
        "display": "flex",
        "align-items": this.transStyle.alignItem,
        "justify-content": this.transStyle.textAlign,
        "cursor": this.transStyle.canClick ? 'pointer': 'default'
      };
    }
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
        this.optionsData = val.data;
      },
      deep: true
    }
  },
  mounted() {
    this.options = this.value;
    this.optionsData = this.value.data;
    this.setOptionsData();
    console.log('widgetComponent',this.widgetComponent);
  },
  methods: {
    // 点击事件
    hanldClick() {
      if(this.transStyle.canClick && this.transStyle.routerUrl) {
        const routerUrl = this.transStyle.routerUrl
        const jumpMode = this.transStyle.jumpMode
        if(routerUrl.startsWith('http://') || routerUrl.startsWith('https://')) {
          if(jumpMode === 'self'){
            window.location.href = routerUrl
          } else {
            window.open(routerUrl)
          }
        } else {
          if(jumpMode === 'self'){
            this.$router.push(routerUrl)
          } else {
            var routeUrl = this.$router.resolve({
              path: routerUrl,
            });
            window.open(routeUrl.href, "_blank");
          }

        }
      }
    },
    // 数据解析
    setOptionsData() {
      const optionsData = this.optionsData; // 数据类型 静态 or 动态
      if (optionsData.dataType == "dynamicData") {
        this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
      } else {};
    },
    // 动态数据
    dynamicDataFn(val, refreshTime) {
      if (!val) return;
      if (this.ispreview) {
        this.getEchartData(val);
        this.flagInter = setInterval(() => {
          this.getEchartData(val);
        }, refreshTime);
      } else {
        this.getEchartData(val);
      }
    },
    getEchartData(val) {
      console.log('动态数据请求参数：', JSON.parse(JSON.stringify(val)));
      queryEchartsData(val)
        .then(res => {
          console.log('参数请求回来了', JSON.parse(JSON.stringify(res)));
          // this.list = res.data;
          // this.styleColor.text = res[0].value;
          // this.$forceUpdate();
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  }
};
</script>

<style scoped lang="less">
.text {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
